<template>
  <div>
    <div class="tag-container flex flex-wrap" v-if="props.huanZheId || props.zhuYuanHao">
      <MkLiShiShuXueTag :title="`历史输血(${ctx.liShiShuXueCiShu})`" :huanZheId="huanZheId" :zhuYuanHao="zhuYuanHao" />
      <MkLiShiFuHeTag :title="`历史血型复核(${ctx.liShiFuHeCiShu})`" :huanZheId="huanZheId" :zhuYuanHao="zhuYuanHao" />
      <MkLiShiPeiXueTag :title="`历史交叉配血(${ctx.liShiPeiXueCiShu})`" :huanZheId="huanZheId" :zhuYuanHao="zhuYuanHao" />
      <MkLiShiFanYingTag :title="`历史输血反应(${ctx.liShiShuXueFanYingCiShu})`" :huanZheId="huanZheId"
        :zhuYuanHao="zhuYuanHao" />
    </div>
  </div>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'MkHuanZheLiShi',
});
import { TraShenQingApi } from '/@/api/tra/TraShenQing';
import { isNull } from '/@/utils';
const props = defineProps({
  huanZheId: {
    type: String,
    default: undefined
  },
  zhuYuanHao: {
    type: String,
    default: undefined
  }
})
const initState = () => {
  return {
    liShiShuXueCiShu: 0,
    liShiFuHeCiShu: 0,
    liShiPeiXueCiShu: 0,
    liShiShuXueFanYingCiShu: 0,
  }
}
const ctx = reactive(initState())

const getLiShiCiShu = async () => {
  ctx.liShiFuHeCiShu = 0
  ctx.liShiPeiXueCiShu = 0
  ctx.liShiShuXueCiShu = 0
  ctx.liShiShuXueFanYingCiShu = 0
  if (isNull(props.huanZheId) && isNull(props.zhuYuanHao)) {
    return
  }
  // 获取患者历史次数
  TraShenQingApi.checkHuanZheLiShiCiShu({ huanZheId: props.huanZheId, zhuYuanHao: props.zhuYuanHao }).then(res => {
    const { liShiShuXueCiShu, liShiFuHeCiShu, liShiPeiXueCiShu, liShiShuXueFanYingCiShu } = res
    ctx.liShiShuXueCiShu = liShiShuXueCiShu
    ctx.liShiFuHeCiShu = liShiFuHeCiShu
    ctx.liShiPeiXueCiShu = liShiPeiXueCiShu
    ctx.liShiShuXueFanYingCiShu = liShiShuXueFanYingCiShu
  })
}

defineExpose({ getLiShiCiShu })
</script>

<style lang='scss' scoped>
.tag-container {
  display: flex;
  gap: 0.5rem;

  :deep(.el-tag) {
    cursor: pointer;
  }
}
</style>